<template>
  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="35%"
    @close="close"
    @closed="closed"
  >
    <el-card class="box-card">
      <!-- <div slot="header" class="clearfix">
        <el-button>房间管理</el-button>
      </div> -->
      <el-form ref="myForm" label-width="150px" :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼宇名称:">
              {{ form.name }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辖区">
              {{ form.region_id }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"> <el-form-item label="注册地址:">
            {{ form.address }}
          </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="状态">
              {{ form.statusDisplay }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总建筑面积:">
              {{ form.total_area }}
            </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="商务面积:">
              {{ form.business_area }}
            </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼宇总高度:">
              {{ form.total_height }}
            </el-form-item>
          </el-col>
          <el-col :span="12"> <el-form-item label="竣工年月:">
            {{ form.over_time }}
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开工年月:">
              {{ form.begin_time }}

            </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="投用年月:">
              {{ form.use_time }}

            </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"> <el-form-item label="地上层数:">
            {{ form.grounp_floor }}
          </el-form-item>
          </el-col>
          <el-col :span="12">  <el-form-item label="地上高度:">
            {{ form.ground_height }}
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地下层数:">
              {{ form.undergrounp_floor }}
            </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="地下高度:">
              {{ form.underground_height }}
            </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车位数:">
              {{ form.carport_number }}
            </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="车位租金:">
              {{ form.carport_cost }}
            </el-form-item></el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="物业公司:">
              {{ form.property_name }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物管等级:">
              {{ form.property_level }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="物业公司联系人:">
              {{ form.property_contact }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物业管理费:">
              {{ form.property_cost }}
            </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式:">
              {{ form.property_phone }}

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="楼宇简介:">
              <textarea v-model="form.note" disabled />

            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

    </el-card>

  </el-dialog>
</template>

<script>
import { ssqOptions, streetOptions, adminOptions } from '@/list/data'
import { buildingGet } from '@/api/building'
export default {
  name: 'Index',
  components: { },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Number,
      default: () => {}
    }

  },
  data() {
    return {
      show: false,
      ssqOptions,
      streetOptions,
      adminOptions,
      form: {

      },
      statusmMap: [
        { val: 1, text: '已建' },
        { val: 2, text: '在建' },
        { val: 3, text: '待建' }
      ]
    }
  },
  computed: {
    title() {
      return '楼宇资料'
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this.getData()
      }
    }
  },
  mounted() {
    this.show = this.visible
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    getData() {
      console.log('获取数据')
      if (this.data > 0) {
        buildingGet(this.data).then(res => {
          this.form = res.data
          this.form.statusDisplay = this.statusmMap.find(p => p.val === this.form.status).text
        })
      }
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>

<style scoped>
textarea{
      background:transparent;
      border-style:none;
      text-indent:15px;

}
</style>
